{% extends "base.html" %}

{% block title %}Seiya 数据分析系统 - 职位数 Top10 城市{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">首页</a></li>
        <li class="breadcrumb-item"><a href="/job">拉勾网职位数据分析</a></li>
        <li class="breadcrumb-item active" aria-current="page">职位数 Top10 城市</li>
    </ol>
</nav>

<div class="my-5" id="chart"></div>

<table class="table table-striped my-5">
    <thead>
        <tr>
            <th scope="col">排名</th>
            <th scope="col">城市</th>
            <th scope="col">职位数</th>
        </tr>
    </thead>
    <tbody>
        {% for row in rows %}
        <tr>
            <th scope="row">{{ loop.index }}</th>
            <td>{{ row.city }}</td>
            <td>{{ row.count }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

{% block js %}
<script>
$.getJSON('/job/count-top10.json', function (data) {
    var chart = new G2.Chart({
        container: 'chart',
        forceFit: true,
        height: 500
    });
    chart.source(data);
    chart.interval().position('city*count');
    chart.render();
});
</script>
{% endblock %}